<style media="screen">
#ssDetailsReport{
  margin:0 24px;
}
.head-container{
  position: relative;
  padding: 10px 0 14px;
}
.head-container .mes{
  overflow: hidden;
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 160px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 20px;
  float:left;
}
.expenses-content div:hover {
    background-color: #F0F0F7;
}
.bill-statistics .item{
  display: flex;
  align-items: center;
  width: 300px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(208,218,226,0.5);
  overflow: visible;
}
.bill-statistics .item .icon{
  clear: both;
  font-size: 14px;
  margin-right: 6px;
  height: auto;
  margin-top:0px;
}
.bill-statistics .item .name{
  clear: both;
}
.bill-statistics .item001{
  background: rgba(109,122,226,0.3);
}
.bill-statistics .item001 i{
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name{
  font-size: 18px;
  color:rgba(109,122,226,1);
}
.bill-statistics .item001 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(109,122,226,0.6);
}

.bill-statistics .item002{
  background: rgba(92,159,243,0.3);
}
.bill-statistics .item002 i{
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name{
  font-size: 18px;
  color:rgba(92,159,243,1);
}
.bill-statistics .item002 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(92,159,243,0.6);
}

.bill-statistics .item003{
  background: rgba(255,171,38,0.3);
}
.bill-statistics .item003 i{
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name{
  font-size: 18px;
  color:rgba(255,171,38,1);
}
.bill-statistics .item003 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(255,171,38,0.6);
}
.bill-statistics .item004{
  background: rgba(145,188,84,0.3);
}
.bill-statistics .item004 i{
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name{
  font-size: 18px;
  color:rgba(145,188,84,1);
}
.bill-statistics .item004 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(145,188,84,0.6);
}
.bill-statistics .item005{
  background: rgba(243,144,92,0.3);
}
.bill-statistics .item005 i{
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name{
  font-size: 18px;
  color:rgba(243,144,92,1);
}
.bill-statistics .item005 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(243,144,92,0.6);
}
.bill-statistics .item006{
  background: rgba(254,33,33,0.3);
}
.bill-statistics .item006 i{
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name{
  font-size: 18px;
  color:rgba(254,33,33,1);
}
.bill-statistics .item006 .name span{
  margin-right: 10px;
  font-size: 14px;
  color:rgba(254,33,33,0.6);
}
.znjMore{
  position: absolute;
  right: 15px;
  top: 15px;
}
.item006 ul{
  display: none;
  width: 300px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  box-shadow: 0px 2px 6px 0px rgba(209,209,209,0.5);
  position: absolute;
  top: 44px;
  left: 0px;
  z-index: 99999;
}
.item006 ul li{
  line-height: 40px;
  font-size: 14px;
  text-indent: 26px;
}
.item006 ul li span{
  color: #FE2121;
  font-weight: 600;
  margin-left: 20px;
}
.item006:hover ul{
  display: block;
}
.hl-page-header__operation{
  float:left;
}
.hl-page-header__operation .second-tab-title{
  color:rgb(102, 102, 102);
  font-size:16px;
  font-weight:bolder;
  float:left;
  margin-left:20px;
  color: #666;
}
.hl-page-header-container .hl-page-header__title .hl-page-header__name{
  color: #999;
  cursor: pointer;
}
.rent-content table{
  width:100%;
}

.rent-content table td{
  line-height:22px !important;
  padding:10px !important;
}
</style>

<section id="ssDetailsReport">
  <hl-page-header title="欠费明细表"></hl-page-header>

  <div>
    <div class="head-container clearfix">
      <div class="clearfix">
        <div class="flow">
          <p>统计日期</p>
          <div class="pull-left">
            <web-calendar v-model="reportDate" :afterdate="endDate"  tips="统计时间" width="156" @on-change="handleReportDate"></web-calendar>
          </div>
        </div>

        <div class="mes">
          <p>信息搜索</p>
          <div class="global_search">
            <span class="icon-Gm-search"></span>
            <input
              autocomplete="off"
              type="text"
              class="global_ipt_text js-client-name"
              placeholder="客户"
              v-model="khname"
              @keyup.enter="getData(1)"
              style="width:220px"
             />
          </div>
        </div>

        <div class="flow">
          <p>费项</p>
					<hl-select :data="expenseList" v-model="expenseId" :width="140" multiple @on-change="handleSelectedExpense"></hl-select>
        </div>

        <div class="flow">
          <p>应收款日期</p>
          <div class="pull-left">
            <web-calendar v-model="beginDate" :afterdate="endDate"  tips="起始时间" width="156" ></web-calendar>
          </div>
          <div class="pull-left line-height-34 color-999 plr-12"> 至 </div>
          <div class="pull-left">
            <web-calendar v-model="endDate" :beforedate="beginDate"  tips="截止时间" width="156"></web-calendar>
          </div>
        </div>

        <div class="button-group" v-show="!isExtenseFlag">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetBtn" size="mini">重置</hl-button>
          <hl-button @on-click="expertExcel" size="mini" v-if="quanxian.indexOf('c1008') > -1">导出</hl-button>
        </div>
      </div>

			<div class="mt-10" v-show="isExtenseFlag">
				<div>
					<div class="flow">
					  <p class="color-cfcfcf">项目</p>
					  <hl-select :data="projectList" v-model="projectId" :width="220" @on-change="getGroupPrimaryData"></hl-select>
          </div>
          <div class="flow">
            <p>组合</p>
            <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
          </div>
					<div class="flow">
					  <p class="color-cfcfcf">楼宇</p>
					  <hl-select :data="buildingList" v-model="buildingId" :width="140" @on-change="getbuildingId"></hl-select>
					</div>
					<div class="flow">
					  <p class="color-cfcfcf">楼层</p>
					  <hl-select :data="floorList" v-model="floorId" :width="140" @on-change="getfloorId"></hl-select>
					</div>
					<div class="flow" style="margin-right: 24px;">
					  <p class="color-cfcfcf">单元</p>
					  <hl-select :data="unitList" v-model="unitId" :width="140" @on-change="getunitId"></hl-select>
					</div>
				</div>
				<div class="button-group pull-left">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetBtn" size="mini">重置</hl-button>
          <hl-button @on-click="expertExcel" size="mini" v-if="quanxian.indexOf('c1008') > -1">导出</hl-button>
				</div>
			</div>

      <div class="global_open_sign" @click="openSearch">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>
    </div>
  </div>

  <div class="rent-content br-4 global_table" style="padding:0;">
    <table>
      <thead>
        <tr class="global_table_title">
          <th>序号</th>
          <th>项目名</th>
          <th>出租资源</th>
          <th>业态</th>
          <th>客户名称</th>
          <th>合同编号</th>
          <th>费项</th>
          <th>账期</th>
          <th>应收款日期</th>
          <th>逾期天数</th>
          <th>应收金额（元）</th>
          <th>减免金额（元）</th>
          <th>结转金额（元）</th>
          <th>实收金额（元）</th>
          <th>欠费金额（元）</th>
        </tr>
      <thead>
      <tbody>
        <tr v-for="(item,index) in dataList" class="global_table_item">
          <td>{{index+1}}</td>
          <td>{{ item.projectName | formatUndefined }}</td>
          <td>
            <div v-for="(item1,index1) in item.units" v-if="item.units">{{ item1.buildingName }} {{ item1.floorNum }} {{ item1.unitName }}</div>
            <div v-if="!item.units">--</div>
          </td>
          <td>
            <div v-for="(item1,index1) in item.units" v-if="item.units">{{ item1.businessTypeVal }}</div>
            <div v-if="!item.units">--</div>
          </td>
          <td>{{ item.zlfName | formatUndefined }}</td>
          <td>{{ item.contractMcode | formatUndefined }}</td>
          <td>{{ item.expenditureName | formatUndefined }}</td>
          <td>{{ item.billBeginDate | formatDate}} 至 {{item.billEndDate | formatDate }}</td>
          <td>{{ item.paymentDeadline | formatDate }}</td>
          <td>{{ item.overdueDay | formatUndefined }}</td>
          <td>{{ item.amountReceive | formatNum }}</td>
          <td>{{ item.amountDerate | formatNum }}</td>
          <td>{{ item.carryOverAmount | formatNum }}</td>
          <td>{{ item.amountPayed | formatNum }}</td>
          <td>{{ item.restAmount | formatNum }}</td>

        </tr>
      </tbody>
    </table>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="selectPerNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

</section>

<script src="modules/report_bi/scripts/arrears_details_report.js" charset="utf-8"></script>
